@import "tailwindcss";
.gd{display:grid;}
.pageframe{
  --bottom-nav:40px;
  grid-template-rows: calc(100vh - var(--bottom-nav)) var(--bottom-nav);}
.bottom-nav{color:#949494;border-top:1px solid #ececec;background-color:#fff;grid-template-rows: var(--bottom-nav);grid-template-columns:1fr 1fr;}/*如果菜单中有多列icon,可按需增加*/
.navlink{align-self:stretch; text-align:center;justify-self: center; /*grid-template-rows:0.6fr 0.4fr;*/
grid-template-rows:1fr;}
.bottom-nav .active{color:#333;}
.gd-icon{align-self:center;}
.gd-cn{align-self:center;}
.overflowauto{overflow:auto;}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4834238 */

  src: url('@/assets/font_4834238_qhkw8aukbyc.woff2?t=1740105822793') format('woff2'),
       url('@/assets/font_4834238_qhkw8aukbyc.woff?t=1740105822793') format('woff'),
       url('@/assets/font_4834238_qhkw8aukbyc.ttf?t=1740105822793') format('truetype');
}
.alift{font-family: iconfont;}

.topbox{position:relative;}
.topbox::before{position:absolute;top:5px;left:5px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaoleft.png');background-size:contain;}
.topbox::after{position:absolute;top:5px;right:5px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaoright.png');background-size:contain;}
.bottombox{position:relative;}
.bottombox::before{position:absolute;bottom:5px;left:5px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaobotomleft.png');background-size:contain;}
.bottombox::after{position:absolute;right:5px;bottom:5px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaobotomright.png');background-size:contain;}


.topbox2::before{position:absolute;top:5px;left:3px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaoleft.png');background-size:contain;}
.topbox2::after{position:absolute;top:5px;right:3px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaoright.png');background-size:contain;}
.bottombox2::before{position:absolute;bottom:5px;left:3px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaobotomleft.png');background-size:contain;}
.bottombox2::after{position:absolute;right:3px;bottom:5px;width:18px;height:18px;content:"";background-image:url('@/assets/jiaobotomright.png');background-size:contain;}


.bgdrop{position:fixed;z-index:1;top:0;left:0;overflow: hidden;width:100%;height:calc(100% - 40px);background-color:rgba(0,0,0,.3);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px);}
.bd-filter{position:fixed;z-index:0;top:0;left:0;overflow: hidden;height:calc(100% - 40px);}


.kk-loader{display: flex;align-items: center;flex-direction: column;justify-content: space-evenly;height: 180px;padding: 30px;border-radius: 10px;background: #fff;}
.kk-loading{position: relative;overflow: hidden;width: 100%;height: 10px;border-radius: 10px;background: lightgrey;}
.kk-loading::after{position: absolute;z-index: 1;top: 0;left: 0;width: 50%;height: 10px;content: "";animation: loading 1s alternate infinite;border-radius: 10px;background: #002;}
.kk-desc{animation: bit 1s alternate infinite;color: #002;font-size: 18px;}
@keyframes bit{from{opacity: 0.3;}
to{opacity: 1;}}
@keyframes loading{0%{left: -25%;}
100%{left: 70%;}
0%{left: -25%;}}




/*对钩*/
 .wsj_svg_wrap .circle {
      stroke-dasharray: var(--l);
      stroke-dashoffset: var(--l); 
    }
    .wsj_svg_wrap .tick {
      stroke-dasharray:var(--l);
      stroke-dashoffset: var(--l);
    }

    .wsj-anim .circle {
      animation: wsj-kf-circle calc(var(--s) * 1) ease-in-out;

      animation-fill-mode: forwards;
    }
    .wsj-anim .tick {
      animation: wsj-kf-tick calc(var(--s) * 0.8) ease-out;
      animation-delay: calc(var(--s) * 0.95);

      animation-fill-mode: forwards;
    }
     .wsj-fade-desc {margin-top: 40px;

      animation: wsj-kf-title calc(var(--s) * 0.6) ease-in-out;
      animation-delay: calc(var(--s) * 1.2);opacity: 0;color: #333;font-size: 36px;

      animation-fill-mode: forwards;
    }

    @keyframes wsj-kf-circle {
      /*keyframes的stroke-dashoffset用了calc之后，必须加px,否则动画无效，不知道是什么原因*/
      from {stroke-dashoffset: calc(var(--l) * 1px);}
      to {stroke-dashoffset:  calc(var(--l) * 2 * 1px);}
    }

    @keyframes wsj-kf-tick {
      from {stroke-dashoffset: var(--l);}
      to {stroke-dashoffset: 0;}
    }

    @keyframes wsj-kf-title {
      from {opacity: 0;}
      to {opacity: 1;}
    }
/*对钩end*/

/*绿色圆圈*/
   .wsj_svg_wrap2{
       animation: wsj-kf-360 calc(var(--s)) linear infinite  ;
    }
    .wsj_svg_wrap2 .circle { animation: wsj-kf-circle2 calc(var(--s) * 0.8) ease-in-out infinite ;

      stroke-dasharray: var(--l);
      stroke-dashoffset: var(--l); 
      }
    @keyframes wsj-kf-360 {
      100% {transform:rotate(-360deg)}
    }
    @keyframes wsj-kf-circle2 {
      /* from {stroke-dashoffset: calc(var(--l) * 1px);}
      to {stroke-dashoffset:  calc(var(--l) * 3 * 1px);} */
            from {stroke-dashoffset: calc(var(--l) * 100px);}
      to {stroke-dashoffset: 880px;}
    }
/*绿色圆圈end*/